<template>
	<layer-box ref="layer" overlay-style="background: rgba(0, 0, 0, 0.50);backdrop-filter: blur(8.3px);" width="465px" height="405px">
		<view class="content">
			<view class="icon uv-flex-row">
				<svg xmlns="http://www.w3.org/2000/svg" width="133" height="133" viewBox="0 0 133 133" fill="none">
					<path d="M66.5 0L124.091 33.25V99.75L66.5 133L8.90931 99.75V33.25L66.5 0Z" fill="#BF2E2E" fill-opacity="0.2" />
					<g filter="url(#filter0_di_192_51)">
						<path
							d="M58.5265 72.4932H46.2838C44.6854 72.4932 43.5828 70.8932 44.1516 69.4005L56.3167 37.4691C56.4813 37.0371 56.7732 36.6653 57.1539 36.403C57.5345 36.1406 57.9859 36.0001 58.4482 36H78.9764C80.5961 36 81.7002 37.641 81.0888 39.1413L74.0055 56.5275H87.3402C89.3013 56.5275 90.3476 58.8391 89.0542 60.3128L56.3608 97.5656C54.7715 99.3769 51.8249 97.8074 52.4416 95.4783L58.5265 72.4932Z"
							fill="#BF2E2E" />
					</g>
					<defs>
						<filter id="filter0_di_192_51" x="37.3" y="36" width="59.025" height="84.0539" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
							<feFlood flood-opacity="0" result="BackgroundImageFix" />
							<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
							<feOffset dy="15" />
							<feGaussianBlur stdDeviation="3.35" />
							<feComposite in2="hardAlpha" operator="out" />
							<feColorMatrix type="matrix" values="0 0 0 0 0.74902 0 0 0 0 0.180392 0 0 0 0 0.180392 0 0 0 0.33 0" />
							<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_192_51" />
							<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_192_51" result="shape" />
							<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
							<feOffset dy="2" />
							<feGaussianBlur stdDeviation="1" />
							<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
							<feColorMatrix type="matrix" values="0 0 0 0 0.864748 0 0 0 0 0.265146 0 0 0 0 0.265146 0 0 0 1 0" />
							<feBlend mode="normal" in2="shape" result="effect2_innerShadow_192_51" />
						</filter>
					</defs>
				</svg>
			</view>
			<uv-text text="解除绑定" color="#fff" size="24px" align="center"></uv-text>
			<uv-text text="确认要解除当前手机的绑定吗？" color="#BABAD8" size="16px" align="center" margin="6px 0 32px"></uv-text>
			<view class="btns uv-flex-row">
				<btn-shine @click="close">取消</btn-shine>
				<btn-shine shine :loading="btnLoading" @click="sub">{{btnLoading?'解绑中...':'确认解绑'}}</btn-shine>
			</view>
		</view>
	</layer-box>
</template>
<script setup>
	import { ref } from 'vue';
	import { unbindMobile } from '@/common/api/user.js';
	const layer = ref(null);
	const btnLoading = ref(false);

	async function sub() {
		btnLoading.value = true;
		await unbindMobile();
		getApp().globalData.getUserMoreInfo();
		close();
	}

	function open() {
		btnLoading.value = false;
		layer.value.open();
	}

	function close() {
		layer.value.close();
	}
	defineExpose({ open, close });
</script>
<style scoped lang="scss">
	.content {
		padding: 0 48px;
		.icon {
			justify-content: center;
			padding: 52px 0 30px;
		}
		.btns {
			justify-content: space-between;
		}
		.error-tip {
			height: 40px;
			padding: 4px 0;
			font-size: 12px;
			color: #f56c6c;
		}
	}
</style>